<template>
   <div class="">
        <div class="material-area">
                    <div class="material-header-area">
                        <div class="material-header">
                        <img src="@/assets/image/index/productChain-icon.png" alt="">
                        <p>产业链导航</p>
                    </div>
                </div>
                <material-list class="material-list"></material-list>
        </div>
   </div>
</template>

<script>
import materialList from './materialList'
export default {
   name: 'material',
   data() {
       return {}
   },
  components: {materialList}
}
</script>

<style scoped lang="less">
 .material-area{
      overflow: hidden;
      position: relative;
      width: 7.5rem;
      background: #000324;
      width: 7.5rem;
  }
  
   .material-list{
       width: 7.25rem;
       margin: 0 auto;
       margin-bottom: 0.7rem;
   }
   .material-header-area{
       height: 2rem;
   }
   .material-header{
       width: 2.76rem;
       height: 0.75rem;
       display: flex;
       align-items: center;
       position: absolute;
       top: 0.85rem;
       left: 50%;
       transform: translateX(-50%);
       img {
           width: 0.9rem;
           height: 0.75rem;
           margin-right: 0.16rem;
       }
       p{
           font-size: 0.31rem;
           color: #FAFAF8;

       }
   }
 
</style>
